<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link href="../style.css" type="text/css" rel="stylesheet" />

    <title>Closure对JavaScript性能带来的影响</title>

    <script type="text/javascript">//<![CDATA[
    
	//At first
    updater1 = (function() {
		var layerHash = {};
		
		function registerLayer(id) {
			layerHash[id] = false;
		}
		
		return {
			registerLayer: registerLayer
		}
	})();

    //Then
    var Updater2 = function() {
    	this.layerHash = {};
    }
    
    Updater2.prototype.registerLayer = function(id) {
    	this.layerHash[id] = false
    }

    var updater2 = new Updater2();


    // PerformTest

    function PerformTest(testIndex){
        var oDate = new Date();
        var _start = oDate.getTime();

        if (testIndex == 1){
            for (var i=0; i < 1000000; i++){
            	updater1.registerLayer(i);
            }
        }

        if (testIndex == 2){
            for (var i=0; i < 1000000; i++){
                updater1.registerLayer(i);
            }
        }

        var totalTime = new Date().getTime() - _start;
        var oDiv = document.getElementById("resultBox" +testIndex);

        if (oDiv){
            oDiv.innerHTML = 'executed in: '+ totalTime +" ms"; 
        }
    }
    </script>

    <style type="text/css">
    textarea.code {
        width: 470px;
        border: 2px solid gray;
        text-align: left;
        padding: 0.5em;
        background-color: #D9D9D9;
    }
    li  {
        border: 10px solid #ccc;
        padding-top: 2em; 
        padding-bottom: 2em;
        padding-left: 10px;
        margin-bottom: 4em;
    }
    button {
        margin-left: 10px;
    }
    </style>

</head>

<body>

<div id="container">
    <h1>私有变量带来的执行效率问题</h1>
    <ol>
        <li>
        	<textarea class="code" rows="15" cols="40" readonly="readonly">

updater1 = (function() {
	var layerHash = {};
	
	function registerLayer(id) {
		layerHash[id] = false;
	}
	
	return {
		registerLayer: registerLayer
	}
})();

        	</textarea>
			<button onclick="PerformTest(1)">execute test</button>
			<div id="resultBox1" class="results">
        	</div>
        </li>
        <li>
        	<textarea class="code" rows="15" cols="40" readonly="readonly">

var Updater2 = function() {
	this.layerHash = {};
}

Updater2.prototype.registerLayer = function(id) {
	this.layerHash[id] = false
}

var updater2 = new Updater2();

	        </textarea>
	        <button onclick="PerformTest(2)">execute test</button>
	        <div id="resultBox2" class="results">
	        </div>
        </li>
    </ol>
    
    <!-- comments -->
    <p>&nbsp;</p>
    <h2 class="comment">Comments</h2>
    <div class="comment">
    私有变量是一把双刃剑
    </div>
</div>

</body>

</html>

